feat: Add events page #66
Conversation
The ARIA label is placed correctly, however lighthouse can't find which text it's referring to
|
Suspense looks horrible on small screens, you have probably haven't updated layout.tsx after updating page.tsx. |
|
Event card skeleton is slightly shorter than event card. |
|
Maybe this large block of text should be replaced by the same type of event skeleton as below it. |
There was a problem hiding this comment.
UI things:
- Badge needs either tooltip or pointer-events-none. since it has a hover effect.
- Add a larger padding between the text and the Image.
- Add a hover effect to the Cards.
- Fix the ring effect for the Link element used on the cards so it works with keyboard navigation.
- The suspense cards are a little shorter than the actual cards.
- As an addition it would maybe be nice to make the heading clickable so it scrolls down to them. I think this can be done with a simple id and a link or something using #.
- Style the text for the time differently from the rest of the cards. I dont know the best way, maybe put it in a strong tag to make it bold or look at examples online
| <> | ||
| <h1 className='my-4'>{t('title')}</h1> | ||
| <Link href='#active'> | ||
| <h2 className='my-2' id='active'> |
There was a problem hiding this comment.
| <h2 className='my-2' id='active'> | |
| <h2 className='pt-4 mb-4' id='active'> |
Should have consistent spacing
| ))} | ||
| </div> | ||
| <Link href='#past'> | ||
| <h2 className='my-4' id='past'> |
There was a problem hiding this comment.
| <h2 className='my-4' id='past'> | |
| <h2 className='pt-4 mb-4' id='past'> |
mt-4 and my-4 doesn't add space to the top for some reason, pt-4 mb-4 will give the same styling as in loading.tsx
| return ( | ||
| <> | ||
| <h1 className='my-4'>{t('title')}</h1> | ||
| <h2 className='my-2'>{t('activeEvents')}</h2> |
There was a problem hiding this comment.
| <h2 className='my-2'>{t('activeEvents')}</h2> | |
| <h2 className='my-4'>{t('activeEvents')}</h2> |
Consistent styling with other h2 elements
There was a problem hiding this comment.
This component is still ~5px shorter than the actual component.
| export default function EventDetailsLoading() { | ||
| return ( | ||
| <> | ||
| <Skeleton className='my-4 h-12 w-3/4 rounded-lg' /> |
There was a problem hiding this comment.
| <Skeleton className='my-4 h-12 w-3/4 rounded-lg' /> | |
| <Skeleton className='mt-6 mb-4 h-12 w-3/4 rounded-lg' /> |
To keep same layout as in the actual page
| const t = await getTranslations('events'); | ||
| return ( | ||
| <> | ||
| <Button variant='secondary' aria-label='Back to Events' asChild> |
There was a problem hiding this comment.
Aria-label isn't translated
The page lists events, separated into active, upcoming and past events.
There's also a separate page each event, so more information can be shown.